<template>
  <div style="display: flex;width: 100%;">
    <el-menu style="width: 80%;background-color: rgb(93, 135, 228);" active-text-color="#fff"
      :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="Home" class="menuItem">首页</el-menu-item>
      <el-menu-item index="Chat" class="menuItem">小世界</el-menu-item>
      <el-menu-item index="Worker" class="menuItem">功能</el-menu-item>
    </el-menu>
    <div style="display: inline-block;width: 20%;margin: auto;color: #fff;display: flex;">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="/head.png" alt="" srcset="" style="height: 1rem;display: inline-block;margin: auto;">
          {{ info.username }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>查看用户信息</el-dropdown-item>
            <el-dropdown-item @click="loginout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { userStore } from "../../store/index"
const userInfo = userStore()
let info = reactive({
  username: userInfo.$state.userInfo.username
})
const router = useRouter()
const route = useRoute()

const activeIndex = ref(route.name)
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  let name = key
  router.replace({ name })
}

const loginout = () => {
  console.log("退出登录");
  sessionStorage.removeItem("cxl_Token")
  router.replace({
    name: 'Login'
  })
}
</script>

<style scoped>
.menuItem {
  color: #a9abae;
  background-color: rgb(93, 135, 228);
}
</style>